<!DOCTYPE html>
<html>
	<head>
		<title>图片剪切</title>
		<meta charset="UTF-8"/>
		<style>
			html,body{
				padding:0;
				margin:0;
			}
			#img{
				max-height:400px;
				max-width:400px;
				margin:10px;
				margin-right:0;
			}
			.previews{
				text-align:center;
			}
			.preview{
				display:inline-block;
				border:2px solid #ccc;
				margin-bottom:10px;
			}
			
			.preview1{
				width:50px;
				height:50px;
			}
			
			.preview2{
				width:80px;
				height:80px;
			}
			
			.preview3{
				width:120px;
				height:120px;
			}
			
			.debug{
				margin:2px;
				border:solid 1px #ccc;
				font-weight:700;
			}
		</style>
	</head>
	<body>
<table>
	<tr>
		<td><img id="img" src="45.jpg"/></td>
		<td>
			<div class="previews">
				<div class="preview1 preview"></div>
				<div class="preview2 preview"></div>
				<div class="preview3 preview"></div>
			</div>
		</td>
	</tr>
</table>
		<script src="../lib/jquery-1.8.3.min.js"></script>
		<script src="imageSelect.min.js"></script>
		<script>
			var setting = {
				scope : {
					top : 100,
					left : 100,
					width : 300,
					height : 300
				},
				ratio:1,
				preview:".preview",
				onSelect : function(pane, img){},
				onEnd : function(a,b){console.log(JSON.stringify(b));}
			}
			
			$("#img").MintImgSelect(setting);

			$("#change").click(function(){
				$("#img").attr("src", "demo.jpg");
			});
		</script>
	</body>
</html>
